<template>
<div>
  <Header></Header>
  <div class="crumb">
    <div class="w">
      <div class="crumb-con">
        <a class="link" href="./index.html">睿购商城</a>
        <span>&gt;</span>
        <span class="link-text">修改密码</span>
      </div>
    </div>
  </div>
  <div class="pass-update-wrap w">
    <div class="left-con">
      <ul class="menu">
        <li class="menu-item">
          <router-link class="link" to="/userCenter">个人中心</router-link>
        </li>
        <li class="menu-item">
          <router-link class="link" to="/orderList">我的订单</router-link>
        </li>
        <li class="menu-item active">
          <router-link class="link" to="/userPassUpdate">修改密码</router-link>
        </li>
      </ul>
    </div>
    <div class="right-con">
      <div class="panel">
        <div class="panel-title">
          修改密码
        </div>
        <div class="panel-body">
          <div class="pass-info">
            <div class="text-line">
              <span class="text">原始密码：</span>
              <input type="password" class="password" id="password" autocomplete="off">
            </div>
            <div class="text-line">
              <span class="text">新 密 码 ： </span>
              <input type="password" class="password" id="password-new" autocomplete="off">
            </div>
            <div class="text-line">
              <span class="text">确认密码：</span>
              <input type="password" class="password" id="password-confirm" autocomplete="off">
            </div>
            <div class="text-line">
              <span class="btn btn-mini btn-submit">提交修改</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "UserPassUpdate",
      components: {Header}
    }

</script>

<style scoped>
  /* 导航主体 */
  .nav-side{
    float: left;
    width: 130px;
    min-height: 100px;
  }
  .nav-side .nav-item{
    line-height: 25px;
    font-size: 13px;
  }
  .nav-side .nav-item .link{
    color: #888;
  }
  .nav-side .nav-item.active .link{
    color: #FF8800;
  }
  /* 右侧内容区 */
  .content.with-nav{
    float: left;
    width: 950px;
  }
  .form-line{
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  .form-line .label{
    display: inline-block;
    width: 80px;
    text-align: center;
  }
  .form-line .input{
    height: 25px;
    line-height: 25px;
    width: 200px;
    font-size: 14px;
  }
</style>
